<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .link {
        color: blue;
        text-decoration: underline;
        cursor: pointer;
    }
    </style>
</head>
<div>
    <div class="parent" id="parent">
        BOM演示
        <!-- <a href="#aaa">eee</a> -->
        <div style="width: 1200px; height: 130px; background-color: green;"> 
            产生x轴方向的滚动条
        </div>
        <div>
            <span class="link" onclick="historyGo()">history.go(-1)</span>
            <br>
            <span class="link" onclick="historyBack()">history.back()</span>
            <br>
            <span class="link" onclick="historyForward()">history.forward()</span>
            <br>
            <!-- <span class="link" onclick="windowOpen()"  >window.open()</span> -->
        </div>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <h1>iframe1:</h1>
        <iframe style="width: 300px; height: 300px;" src="https://www.soso.com" name="iframe1"></iframe>
        BOM演示 BOM演示 BOM演示 BOM演示 BOM演示 BOM演示 BOM演示 BOM演示 BOM演示 
        <span class="link" onclick="doScrollTo()"  >srcollTo(0,0)</span>
        &nbsp;&nbsp;
        <span class="link" onclick="doScrollBy()"  >ScrollBy(40, -40)</span>
        <!-- <a id="aaa">eee</a> -->
        
        
    </div>
    <script>
        function historyGo() {
            
            window.history.go(-1)
        }
        function historyBack() {
            window.history.back()
        }
        function historyForward() {
            window.history.forward()
        }
        function windowOpen() {
            window.open('https://www.baidu.com','_blank');
        }

        // window对象上的属性
        // console.log('window.innerHeight:', window.innerHeight)
        // console.log('window.innerWidth:', window.innerWidth)
        // console.log('window.outerWidth:', window.outerWidth)
        // console.log('window.outerWidth:', window.outerWidth)
        // console.log('window.screenLeft:', window.screenLeft)
        // console.log('window.screenTop:', window.screenTop)
        // console.log('window.screenX:', window.screenX)
        // console.log('window.screenY:', window.screenY)
        // console.log('window.frames[0].name', window.frames[0].name)

        // window对象上的方法

        // window.alert alert会阻塞进程
        // alert('alert');
        
        // window.setInterval
        var i = 1
        // var insInterval = setInterval(() => {
        //     console.log('setInterval', i++)
        // }, 1000);

        // window.setTimeout 
        // var insTimeout = null
        // function testFun() {
        //     console.log('setTimeout testFun')
        //     insTimeout && clearTimeout(insTimeout)
        //     insTimeout = setTimeout(() => {
        //         testFun()
        //     }, 2000); //
        // }
        // testFun()

        // // 12秒钟后把这两个定时器清空
        // setTimeout(() => {
        //     insInterval && clearInterval(insInterval)
        //     insTimeout && clearTimeout(insTimeout)
        // }, 12000);
        
        // window.print
        // window.print()
        
        // scrollTo 
        function doScrollTo() {
            // document.documentElement.scrollTop //firefox
            // document.documentElement.scrollLeft //firefox
            window.scrollTo(0, 0);
        }
        function doScrollBy() {
            // document.documentElement.scrollTop //firefox
            // document.documentElement.scrollLeft //firefox
            window.scrollBy(40, -40);
        }       
        // Navigator对象
        // console.log('navigator.appCodeName:', navigator.appCodeName)
        // console.log('navigator.appName:', navigator.appName)
        // console.log('navigator.appVersion:', navigator.appVersion)
        // console.log('navigator.platform:', navigator.platform)
        // console.log('navigator.userAgent:', navigator.userAgent)

        // History对象
        // console.log('history.length', history.length)

        // Location对象 可读，可写

        // console.log('location.protocol：', location.protocol)
        // console.log('location.hostname：', location.hostname)
        // console.log('location.port：', location.port)
        // console.log('location.pathname：', location.pathname)
        // console.log('location.search：', location.search)
        // console.log('location.hash：', location.hash)
        // console.log('location.href：', location.href)
        // console.log('location.host：', location.host)

        // setTimeout(() => {
        //     // location.hash = '/test'
        //     location.pathname = '/front-study/html.html'
        //     // location.href = 'https://www.baidu.com'
        //     // window.location.replace("https://www.runoob.com") // 在历史记录替换bom.html的记录
        //     // window.location.reload('force') // 强制刷新
        // }, 3000);

        // cookie 
        function setCookie(name, value, Hours) {
            var d = new Date();
            var offset = 8;
            var utc = d.getTime() + (d.getTimezoneOffset() * 60000);
            var nd = utc + (3600000 * offset);
            var exp = new Date(nd);
            exp.setTime(exp.getTime() + Hours * 60 * 60 * 1000);
            document.cookie = name + "=" + encodeURIComponent(value) + ";expires=" + exp.toGMTString() + ";path=/;"
        }

        function getCookie(name) {
            var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
            if (arr != null) return decodeURIComponent(arr[2]);
            return null
        }

        setCookie('test', 'test', 1)
        setCookie('test1', 'test1', 1)
        console.log('getCookie:', getCookie('test1'))

        // localStorage sessionStorage
        localStorage.setItem("lastname", "Smith");
        console.log('localStorage', localStorage.getItem("lastname"))
        sessionStorage.setItem("sessionStorage", "sessionStorage");
        console.log('localStorage', sessionStorage.getItem("sessionStorage"))

    </script>
</body>
</html>
